<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>12306 飞机票</title>
    <link rel="stylesheet" href="framework/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="framework/reset.css">
    <link rel="stylesheet" href="styles/plane-ticket.css">
</head>
<body>
    <!-- 总容器 -->
    <div class="wrapper">
        <!-- header部分 -->
        <header>
            <!-- 左边angle部分 -->
            <a class="angle-left" href="index.html">
                <i class="fa fa-angle-left"></i>
            </a>
            <!-- 右边分享部分 -->
            <div class="share">
                <i class="fa fa-share-square-o"></i>
            </div>
        </header>

        <!-- 查询飞机票部分 -->
        <div class="plane-ticket">
            <div class="plane-ticket-info">
                <div class="place">
                    <p>昆明</p>
                    <i class="fa fa-exchange"></i>
                    <p>武汉</p>
                </div>
                <div class="date-child">
                    <div class="date">
                        <p class="month-day">7月8日</p>
                        <p class="week-day">周一</p>
                    </div>
                    <div class="child">
                        <p>儿童婴儿预订说明</p>
                        <i class="fa fa-exclamation-circle"></i>
                    </div>
                </div>
                <div class="button-ticket-query">
                    <button>查询</button>
                </div>
                <div class="ticket-query-history">
                    <p class="history-1">昆明-武汉</p>
                    <p class="delete-history">清除历史</p>
                </div>
            </div>
        </div>

        <!-- 重要提示部分 -->
        <div class="important-message">
            <i class="fa fa-volume-up"></i>
            <p>关于防范不法分子冒充航空公司客服人员诈骗的重要提示</p>
            <i class="fa fa-angle-right"></i>
        </div>

        <!-- 五种功能部分 -->
        <ul class="function-box">
            <li>
                <img src="images/航班动态.png" alt="航班动态">
                <p>航班动态</p>
            </li>
            <li>
                <img src="images/选座值机.png" alt="选座值机">
                <p>选座值机</p>
            </li>
            <li>
                <img src="images/约车func.png" alt="约车">
                <p>约车</p>
            </li>
            <li>
                <img src="images/保险.png" alt="保险">
                <p>保险</p>
            </li>
            <li>
                <img src="images/乘机指南.png" alt="乘机指南">
                <p>乘机指南</p>
            </li>
        </ul>

        <!-- 其他信息部分 -->
        <ul class="other-info-box">
            <li>
                <img src="images/航班信息说明.png" alt="">
                <p>航班信息说明</p>
            </li>
            <li>
                <img src="images/开通线路.png" alt="">
                <p>开通线路</p>
            </li>
            <li>
                <img src="images/客服电话.png" alt="">
                <p>客服电话</p>
            </li>
        </ul>

        <!-- 底部菜单部分 -->
        <ul class="footer">
            <li class="booking">
                <i class="fa fa-plane"></i>
                <p>预订</p>
            </li>
            <li>
                <i class="fa fa-file-text-o"></i>
                <p>订单</p>
            </li>
        </ul>
    </div>
</body>
</html>